<template>
	<view class="container">
		<!-- 背景图层 -->
		<image class="bg-image" src="https://images.unsplash.com/photo-1536152470836-b943b246224c" mode="aspectFill"></image>
		<view class="bg-gradient"></view>
		
		<!-- 内容层 -->
		<view class="content">
			<view class="header">
				<text class="title">AI解梦</text>
				<text class="count">剩余次数：3</text>
			</view>
			
			<view class="dream-input-box">
				<textarea
					class="dream-textarea"
					placeholder="请描述您的梦境内容..."
					placeholder-class="placeholder"
					v-model="dreamContent"
					maxlength="500"
				></textarea>
				<button class="interpret-btn" @click="handleInterpret">开始解梦</button>
			</view>
			
			<view class="quick-actions">
				<view class="action-card" @click="goToHotDreams">
					<text class="card-title">热门解梦</text>
					<text class="card-desc">查看大家都在问什么</text>
				</view>
				<view class="action-card" @click="goToHistory">
					<text class="card-title">解梦历史</text>
					<text class="card-desc">回顾您的梦境记录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dreamContent: ''
		}
	},
	methods: {
		handleInterpret() {
			if (!this.dreamContent.trim()) {
				uni.showToast({
					title: '请输入梦境内容',
					icon: 'none'
				})
				return
			}
			
			uni.navigateTo({
				url: '/pages/result/result?content=' + encodeURIComponent(this.dreamContent)
			})
		},
		goToHotDreams() {
			uni.navigateTo({
				url: '/pages/hot/hot'
			})
		},
		goToHistory() {
			uni.switchTab({
				url: '/pages/history/history'
			})
		}
	}
}
</script>

<style>
.container {
	position: relative;
	min-height: 100vh;
	background: #000;
}

.bg-image {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.bg-gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
	z-index: 2;
}

.content {
	position: relative;
	z-index: 3;
	padding: 30rpx;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40rpx;
	padding-top: 20rpx;
}

.title {
	font-size: 48rpx;
	font-weight: bold;
	color: #fff;
}

.count {
	font-size: 24rpx;
	color: #fff;
}

.dream-input-box {
	background: rgba(255,255,255,0.9);
	backdrop-filter: blur(10px);
	border-radius: 30rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.dream-textarea {
	width: 100%;
	height: 240rpx;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
}

.placeholder {
	color: #999;
}

.interpret-btn {
	width: 80%;
	height: 88rpx;
	line-height: 88rpx;
	background: #4080ff;
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
	border-radius: 44rpx;
	margin: 0 auto;
}

.quick-actions {
	display: flex;
	justify-content: space-between;
	gap: 20rpx;
}

.action-card {
	flex: 1;
	background: rgba(255,255,255,0.8);
	backdrop-filter: blur(10px);
	border-radius: 20rpx;
	padding: 20rpx;
}

.card-title {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.card-desc {
	font-size: 24rpx;
	color: #666;
}
</style>
